<template>
	<view class="full">
		<scroll-view scroll-y @scrolltolower="scrolltolower">
			<view class="myInfo" v-if="userInfo&&userInfo.phone">
				<uv-avatar :src="userInfo?.avatarUrl" shape="square"></uv-avatar>
				<label class="info ">
					<span class="info-1">{{ userInfo?.vip_name }}</span>
					<!-- <span class="info-2">{{ userInfo?.vip_name }}</span> -->
				</label>
				<view class="setting" @click="toSetting">
					<uv-icon name="setting-fill" :color="app.globalData.primaryColor" size="28"></uv-icon>
				</view>
			</view>
			<view class="myInfo anm" v-else>
				<uv-icon name="account-fill" :color="app.globalData.primaryColor" size="40"></uv-icon>
				<view class="info active">
					<!-- #ifdef MP-WEIXIN -->
					<button plain=true open-type="getPhoneNumber" @getphonenumber="wechatLogin">
						立即登录
					</button>
					<!-- #endif -->
					<button plain=true @tap="toLogin">
						立即登录
					</button>
				</view>
			</view>
			<view class="content">
				<view class="card g-10 active">
					<view class="cardTitle" style="padding: 20px 10px;" @click="orderOnclick({ text: '全部' })">我的订单
						<view class="flex cardExtra">
							全部<uv-icon name="arrow-right" :color="app.globalData.primaryColor"></uv-icon>
						</view>
					</view>
					<!-- <Grid :lists="order_cate" @click="orderOnclick" /> -->
				</view>
				<view class="card g-10">
					<view class="cardTitle">我的服务</view>
					<Grid :lists="function_cate" @click="gridOnclick" />
				</view>
				<goodsList :sell="true" ref="goodsListRef" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'

	onShow(() => {
		userInfo.value = uni.getStorageSync("userInfo")
	})
	const app = getApp()
	const userInfo = ref(null)
	const orderOnclick = (value) => {
		app.vibrate()
		let flag = app.checkH5Login()
		flag && uni.navigateTo({
			url: '/pages/orderList/orderList?title=' + value.text
		})
	}
	const function_cate = ref([{
		text: '收货地址',
		icon: 'empty-address',
		type: 'icon'
	}, {
		text: '实名认证',
		icon: 'account',
		type: 'icon'
	}, {
		text: '客服热线',
		icon: 'kefu-ermai',
		type: 'icon'
	}, {
		text: '投诉中心',
		icon: 'file-text',
		type: 'icon'
	}, ])
	const gridOnclick = (value) => {
		app.vibrate()
		let flag = app.checkH5Login()
		switch (value.text) {
			case '收货地址':
				flag && uni.navigateTo({
					url: '/pages/addressList/addressList'
				})
				break;
			case '实名认证':
				flag && uni.navigateTo({
					url: '/pages/realperson/realperson'
				})
				break;
			case '客服热线':
				app.callPhone()
				break;
			case '投诉中心':
				flag && uni.navigateTo({
					url: '/pages/complainlist/complainlist'
				})
				break;
			default:
				break;
		}
	}
	const goodsListRef = ref(null)
	onReachBottom(() => {
		goodsListRef.value.getData()
	})
	const scrolltolower = () => {
		goodsListRef.value.getData()
	}
	const wechatLogin = (e) => {
		uni.login({
			success: (res) => {
				if (res.errMsg == 'login:ok' && e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.getUserInfo({
						success: function(infoRes) {
							let nickName = infoRes.userInfo.nickName;
							let avatarUrl = infoRes.userInfo.avatarUrl;
							let req = {
								code: res.code,
								phone_code: e.detail.code,
								nickName: infoRes.userInfo.nickName,
								avatarUrl: infoRes.userInfo.avatarUrl
							}
							app.post('api.Wechatapp/login', req).then(loginRes => {
								userInfo.value = loginRes
								console.log(loginRes, '123')
								uni.setStorageSync("userInfo", loginRes)
							})
						}
					})
				}
			},
			fail(msg) {}
		})
	}
	const toSetting = () => {
		app.vibrate()
		uni.navigateTo({
			url: '/pages/setting/setting'
		})
	}
	const toLogin = () => {
		app.vibrate()
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style scoped lang="scss">
	.full {
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: white;

		&>uni-scroll-view {
			height: 100%;
		}
	}

	.myInfo {
		display: flex;
		align-items: center;
		position: relative;
		gap: 20px;
		padding: 20px;
		background-size: cover;
		background-position-y: center;
		background-blend-mode: overlay;
		//border-radius: 10px;
		//background-color: whitesmoke;
		//box-shadow: inset 5px 5px 10px #a9a9aa77,inset -5px -5px 10px #ffffff7e;
	}

	.avatar-small {
		width: var(--nut-avatar-small-width, 32px);
		height: var(--nut-avatar-small-height, 32px);
		line-height: var(--nut-avatar-small-height, 32px);
	}

	.grid-item_content {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: var(--nut-grid-item-content-padding, 16px 8px);
		background: var(--nut-grid-item-content-bg-color, var(--nut-white, #fff));
		border: 0 solid var(--nut-grid-border-color, #f5f6f7);
	}

	.grid-item_text {
		margin: var(--nut-grid-item-text-margin, 8px) 0 0 0;
		font-size: var(--nut-grid-item-text-font-size, var(--nut-font-size-1, 12px));
		line-height: 1.5;
		color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666));
		word-break: break-all;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 10px;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		background-color: whitesmoke;
	}

	.cardBox {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.card {
		background-color: white;
		box-shadow: 0 1px 7px 0 #edeef1;
		display: flex;
		flex-direction: column;
	}


	.cardTitle {
		font-size: medium;
		font-weight: 600;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.cardExtra {
			color: #999;
			font-size: 12px;
			align-items: center;
		}
	}

	.setting {
		float: right;
		position: absolute;
		right: 20px;
	}

	.gridBox {
		display: grid;
		gap: 1px;
		overflow: hidden;
		background-color: white;
		border: 1px solid #ececec;
		padding: 2px;
	}

	::v-deep.nut-grid {
		justify-content: space-around;
	}

	.bottom {
		border-bottom: 1px solid #a9a9aa77;
	}

	.round {
		border-radius: 50%;
	}

	.info {
		display: flex;
		flex-direction: column;
		gap: 10px;
		font-size: 18px;
		font-weight: bold;

		button {
			width: 100%;
			height: 100%;
			border: none;
			background: transparent;
			padding: 0;
			margin: 0;
		}
	}

	.info-1,
	.info-2 {
		display: inline-block;
		padding: 4px;
		width: fit-content;
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.9);
	}

	.info-1 {
		font-weight: bold;
	}

	.info-2 {
		border-radius: 3px;
		font-size: xx-small;
	}

	.toLogin {
		color: #0099ff;
		border-bottom: solid;
	}
</style>